<template>
	<view class="container">
		<u-navbar :title="$t('my.withdrawal_records')" placeholder bgColor="#0fbc96" leftIconColor="#FFFFFF"
			titleStyle="color: #FFFFFF" autoBack>
		</u-navbar>
		<view class="content">
			<view class="mar-bottom-35">
				<CustomTabs :content="content" :list="tabList" @change="tabChange" />
			</view>

			<up-empty v-if="orderList.length <= 0" class="empty-centent" mode="data" :iconSize="56" icon="/static/image/empty.png" :text="$t('my.data_empty')">
			</up-empty>

			<view v-for="item in orderList" :key="item.id" class="wt-card">
				<view class="betweenX">
					<view class="flex flex-direction mar-bottom-20">
						<text class="font-26 color_929292">{{$t('home.money')}}</text>
						<text class="font-24 color_01b176">{{item.amount}} USDT</text>
					</view>
					<up-tag v-if="item.apply_status === 1" :text="$t('my.unprocessed')" type="warning"></up-tag>
					<up-tag v-else-if="item.apply_status === 3" :text="$t('my.paid')" type="success"></up-tag>
					<up-tag v-else :text="$t('my.rescinded')" type="error"></up-tag>
				</view>

				<view class="flex flex-direction mar-bottom-20">
					<text class="font-26 color_929292">{{$t('my.time')}}</text>
					<text class="font-24">{{formatTimestamp(item.created_at * 1000)}}</text>
				</view>

				<view class="flex flex-direction mar-bottom-20">
					<text class="font-26 color_929292">{{$t('home.wallet_address')}}</text>
					<text class="font-24">{{address2simple(item.wallet_address,10)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import CustomTabs from '@/pages/my_actions/components/custom-tabs/index.vue'
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		useI18n
	} from 'vue-i18n'
	import {
		withdrawalList
	} from '@/api/user'
	import {
		formatTimestamp,
		address2simple
	} from '@/util/commonFunction'

	const {
		t
	} = useI18n()

	const content = ref(0)
	const tabList = reactive([t('my.all'), t('my.unprocessed'), t('my.paid'), t('my.rescinded')])
	const orderList = ref([]); // 存储列表数据
	const next_page_url = ref(true); // 用于判断是否存在下一页
	const formData = ref({
		page: 1,
		ps: 10,
		apply_status: ""
	});

	const tabChange = (event) => {
		content.value = event
		switch (content.value) {
			case 0:
				formData.value.apply_status = "";
				refresh();
				break;
			case 1:
				formData.value.apply_status = 1;
				refresh();
				break;
			case 2:
				formData.value.apply_status = 3;
				refresh();
				break;
			case 3:
				formData.value.apply_status = 5;
				refresh();
				break;
			default:
				break;
		}
	}

	// 加载更多数据
	const loadMore = async () => {
		if (!next_page_url.value) return;
		formData.value.page += 1;
		fetchData().then((res) => {
			next_page_url.value = res.next_page_url;
			orderList.value = [...orderList.value, ...res.data];
		})
	};

	// 下拉刷新数据
	const refresh = () => {
		formData.value.page = 1;
		fetchData().then((res) => {
			orderList.value = res.data;
		}).finally(() => {
			uni.stopPullDownRefresh(); // 停止下拉刷新动画
		});
	};

	const fetchData = async () => {
		return new Promise(async (resolve, reject) => {
			try {
				const res = await withdrawalList({
					...formData.value
				})
				resolve(res.data);
			} catch (error) {
				reject(error)
			}
		});
	};

	// 监听页面滚动到底部事件，加载更多数据
	onReachBottom(loadMore);

	// 监听下拉刷新事件，重新加载第一页数据
	onPullDownRefresh(refresh);

	onLoad(() => {
		refresh();
	});
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx 25rpx 40rpx 25rpx;
		box-sizing: border-box;

		.wt-card {
			line-height: 1.5;
			padding: 4.8309vw;
			margin-bottom: 3.8647vw;
			border-radius: 1.9324vw;
			background: #ffffff;
			box-sizing: border-box;
			box-shadow: 0 1.2077vw 4.8309vw rgba(59, 72, 92, .07);

			.state {
				display: flex;
				align-items: center;
				height: 60rpx;
				color: #3b97e1;
				border: 1rpx solid #3b97e1;
				border-radius: 40rpx;
				font-size: 28rpx;
				padding: 0 25rpx;
			}
		}
	}
</style>